<script setup>
import { ref } from 'vue'
import MapSelect from './MapSelect/index.vue'
import MapEditor from './MapEditor/index.vue'

const land = ref(null)
const data = ref({
  // 背景
  background: {
    src: '/bg.png',
    width: 1311,
    height: 981,
  },
  // 编号
  sn: {
    radius: 15,
    lineWidth: 2,
    lintColor: '#e7b700',
    fontSize: 16,
    fontColor: '#e7b700',
    backgroundColor: '#ffffff',
  },
  // 遮罩
  mask: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  // 地块
  stages: [
    {
      sn: '01',
      src: '/a.png',
      x: 30,
      y: 60,
      width: 80,
      height: 80,
    },
    {
      sn: '02',
      src: '/b.png',
      x: 90,
      y: 120,
      width: 80,
      height: 80,
    },
    {
      sn: '03',
      src: '/c.png',
      x: 500,
      y: 500,
      width: 80,
      height: 80,
    },
  ],
});

/** @事件 隐藏土地 */
function onHide() {
  land.value && (land.value.style.display = 'none');
}

/** @事件 点击土地 */
function onStage({ sn, isTop, isLeft }) {
  if (land.value) {
    land.value.style.display = 'block';
    land.value.style.top = isTop ? 'auto' : '20px';
    land.value.style.bottom = isTop ? '20px' : 'auto';
    land.value.style.left = isLeft ? 'auto' : '30px';
    land.value.style.right = isLeft ? '30px' : 'auto';
    land.value.innerHTML = `<span>我是土地${sn}号</span>`;
  }
  console.log('onStage', { sn, isTop, isLeft });
}

</script>

<template>
  <main>
    <div class="render">
      <MapSelect :data="data" @stage="onStage" @hide="onHide"/>
      <div class="stage" ref="land">我是土地?号</div>
    </div>
    <div class="editor">
      <MapEditor v-model:data="data"/>
    </div>
  </main>
</template>

<style scoped>
main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
  user-select: none;
}
.editor {
  width: calc(100vw - 360px);
  height: 500px;
  margin: 20px;
  flex: 1;
}
.render {
  position: relative;
  width: 300px;
  height: 500px;
  flex-shrink: 0;
  margin-left: 20px;
}
.stage {
  display: none;
  position: absolute;
  width: 80px;
  height: 180px;
  font-size: 32px;
  border-radius: 8px;
  text-align: center;
  user-select: none;
  background-color: #21ff8e;
  color: #178c00;
  top: 20px;
  left: 30px;
}
</style>
